<!-- 任务处理 -->
<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" :before-close="handleCloseBindWarnStandard" :close-on-click-modal="false" :title="dialogForm.task_name + '处理'" width="800px" height="300px" class="noMargin task">
      <div class="main">
        <ul v-if="dialogForm.task_name==='火警' || dialogForm.task_name==='故障' || dialogForm.task_name==='屏蔽'">
          <li><span class="label">事件：</span><span class="value">{{ dialogForm.task_name }}</span></li>
          <li><span class="label">时间：</span><span class="value">{{ dialogForm.task_start_at }}</span></li>
          <li><span class="label">单位：</span><span class="value">{{ dialogForm.corp_name }}</span></li>
          <li><span class="label">设备类型：</span><span class="value">{{ dialogForm.tname }}</span></li>
          <li><span class="label">设备名称：</span><span class="value">{{ dialogForm.mname }}</span></li>
          <li><span class="label">状态：</span><span class="value">{{ dialogForm.status }}</span></li>
        </ul>
        <ul v-else>
          <li><span class="label">事件：</span><span class="value">{{ dialogForm.task_name }}</span></li>
          <li><span class="label">计划名称：</span><span class="value">{{ dialogForm.plan_name }}</span></li>
          <li><span class="label">任务编号：</span><span class="value">{{ dialogForm.task_id }}</span></li>
          <li><span class="label">任务时间：</span><span class="value">{{ dialogForm.task_start_at }}</span></li>
          <li><span class="label">负责人：</span><span class="value">{{ dialogForm.leaderName }}</span></li>
          <li><span class="label">状态：</span><span class="value">{{ dialogForm.status }}</span></li>
        </ul>
        <div v-if="dialogForm.task_name==='巡检' || dialogForm.task_name==='巡更'" class="processing-signal">
          <p>请选择执行人</p>
          <ul class="btn-list">
            <li v-for="item in btnExecutorList" :key="item.index"><el-button :class="item.className" type="" @click.native="executor(item.name,item.index)">{{ item.name }}</el-button></li>
          </ul>
        </div>
        <div v-if="dialogForm.task_name==='火警'" class="processing-signal">
          <p>请选择火警信号处理结果</p>
          <ul class="btn-list">
            <li v-for="item in btnList" :key="item.index"><el-button :class="item.className" type="" @click.native="processingSignal(item.name,item.index)">{{ item.name }}</el-button></li>
          </ul>
        </div>
        <div v-if="dialogForm.task_name==='火警' || dialogForm.task_name==='故障'" class="processing-reason">
          <p>请选择{{ dialogForm.task_name }}原因</p>
          <ul class="btn-list">
            <li v-for="item in btnReasonList" :key="item.index"><el-button :class="item.className" type="" @click.native="reason(item.name,item.index)">{{ item.name }}</el-button></li>
          </ul>
        </div>
        <div v-if="dialogForm.task_name==='火警' || dialogForm.task_name==='故障' || dialogForm.task_name==='屏蔽'" class="processing-reason">
          <p>请上传现场图片</p>
          <ul class="upload-list">
            <li v-for="(item, index) in imgList" :key="index" :class="item.type">
              <img v-if="item.type === 'img'" :src="item.url" alt="">
              <div v-if="item.type === 'img'" class="deleteImg" @click="deleteImg(item.url)"><i class="el-icon-delete"/></div>
              <div v-if="item.type === 'img'" class="infoImg" @click="infoImg(item.url)"><i class="el-icon-zoom-in"/></div>
              <div v-if="item.type !== 'img'&&imgList.length < 4" class="upload-btn" @click="uploadImg">
                <i slot="default" class="el-icon-plus"/>
              </div>
            </li>
          </ul>
          <input id="upload" name="plan" type="file" @change="upload">
          <!-- <el-upload
            :auto-upload="false"
            action="#"
            list-type="picture-card">
            <i slot="default" class="el-icon-plus"/>
            <div slot="file" slot-scope="{file}">
              <img :src="file.url" class="el-upload-list__item-thumbnail" >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"/>
                </span>
              </span>
            </div>
          </el-upload> -->
        </div>
        <div v-if="dialogForm.task_name==='火警' || dialogForm.task_name==='故障' || dialogForm.task_name==='屏蔽'" class="processing-remarks">
          <p>备注</p>
          <el-input
            v-model="dialogForm.remarks"
            :rows="2"
            type="textarea"
            placeholder="请输入备注"/>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleImg">
      <img :src="dialogImageUrl" alt="" width="100%" >
    </el-dialog>
  </div>
</template>
<script>
import $ from 'jquery'
import { tasksHandle, tasksAssign } from '@/api/taskCenter'
import { userWorkerList } from '@/api/common'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    dialogForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dialogType: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisibleImg: false,
      disabled: false,
      imgList: [{
        type: 'btn',
        url: ''
      }],
      btnList: [{
        index: 1,
        name: '误报',
        className: 'active'
      }, {
        index: 2,
        name: '真实',
        className: 'default'
      }],
      btnReasonList: [{
        index: 1,
        name: '设备损坏',
        className: 'active'
      }, {
        index: 2,
        name: '作业扬尘',
        className: 'default'
      }, {
        index: 3,
        name: '维保测试',
        className: 'default'
      }, {
        index: 4,
        name: '施工不慎',
        className: 'default'
      }, {
        index: 5,
        name: '其他',
        className: 'default'
      }],
      btnExecutorList: [],
      title: '',
      // 添加form验证
      formLoading: false,
      activeCLass: 'active',
      defaultClass: 'default'
    }
  },
  computed: {
  },
  created() {
    console.log(JSON.stringify(this.dialogForm))
    if (this.dialogType === '添加') {
      this.title = this.dialogForm.task_name + '处理'
      this.getUserWorkerList()
    }
  },
  methods: {
    uploadImg() {
      $('#upload').click()
    },
    upload(e) {
      var file = e.target.files[0]
      this.imgList.unshift({
        type: 'img',
        url: URL.createObjectURL(file),
        file: file
      })
    },
    infoImg(data) {
      this.dialogImageUrl = data
      this.dialogVisibleImg = true
    },
    deleteImg(data) {
      this.imgList.forEach((item, index) => {
        if (item.url === data) {
          this.imgList.splice(index, 1)
        }
      })
    },
    // 获取执行人
    getUserWorkerList() {
      const that = this
      var listQuery = {
        page: 1,
        offset: 1000,
        corp_id: that.dialogForm.corp_id
      }
      userWorkerList(listQuery)
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.btnExecutorList = []
            data.data.forEach(function(value, index, array) {
              array[index].index = index
              that.btnExecutorList.push({
                index: index,
                className: index === 0 ? 'active' : 'default',
                name: value.nickname,
                id: value.uuid
              })
            })
            console.log(that.btnExecutorList)
          }
        })
        .catch(() => {
          this.userWorkerList = []
        })
    },
    handleRemove(file) {
      console.log(JSON.stringify(file))
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisibleImg = true
    },
    handleDownload(file) {
      console.log(JSON.stringify(file))
    },
    submitForm(val) {
      const that = this
      that.formLoading = true
      if (that.dialogForm.task_name === '巡检' || that.dialogForm.task_name === '巡更') {
        if (that.btnExecutorList.length > 0) {
          var uuid = ''
          that.btnExecutorList.forEach(item => {
            if (item.className === 'active') {
              uuid = item.id
            }
          })
          const params = {
            task_id: that.dialogForm.task_id,
            uuid: uuid,
            task_type: that.dialogForm.task_type
          }
          tasksAssign(params)
            .then((res) => {
              that.formLoading = false
              that.dialogVisible = false
              const data = res.data
              if (data.code === 40000) {
                that.$message.success(data.message)
                that.$emit('submitForm', that.dialogForm)
              } else {
                that.$message.warning(data.message)
              }
            })
            .catch((err) => {
              console.log(err)
              that.formLoading = false
            })
        }
      } else {
        that.btnList.forEach(item => {
          if (item.className === 'active') {
            that.dialogForm.result = item.index
          }
        })
        that.btnReasonList.forEach(item => {
          if (item.className === 'active') {
            that.dialogForm.cause = item.index
          }
        })
        const params = {
          task_id: that.dialogForm.task_id,
          result: that.dialogForm.result,
          cause: that.dialogForm.cause,
          remark: that.dialogForm.remarks ? that.dialogForm.remarks : '',
          task_type: that.dialogForm.task_type
        }
        that.imgList.forEach((item, index) => {
          if (item.type === 'img') {
            params['img_' + (index + 1)] = item.file
          }
        })
        const image = new window.FormData()
        for (var item in params) {
          image.append(item, params[item])
        }
        const data = {
          fileType: 'file',
          data: image
        }
        console.log(data)
        tasksHandle(data)
          .then((res) => {
            that.formLoading = false
            that.dialogVisible = false
            const data = res.data
            if (data.code === 40000) {
              that.$message.success(data.message)
              that.$emit('submitForm', that.dialogForm)
            } else {
              that.$message.warning(data.message)
            }
          })
          .catch((err) => {
            console.log(err)
            that.formLoading = false
          })
      }
    },
    // 火警信号处理
    processingSignal(name, index) {
      for (var i = 0; i < this.btnList.length; i++) {
        if ((index - 1) === i) {
          this.btnList[i].className = 'active'
        } else {
          this.btnList[i].className = 'default'
        }
      }
      this.dialogForm.processingSignal = name
    },
    // 执行人 - 巡检
    executor(name, index) {
      for (var i = 0; i < this.btnExecutorList.length; i++) {
        if (index === i) {
          this.btnExecutorList[i].className = 'active'
        } else {
          this.btnExecutorList[i].className = 'default'
        }
      }
      this.dialogForm.handlePerson = index
      console.log(JSON.stringify(this.dialogForm))
    },
    // 火警原因
    reason(name, index) {
      for (var i = 0; i < this.btnReasonList.length; i++) {
        if ((index - 1) === i) {
          this.btnReasonList[i].className = 'active'
        } else {
          this.btnReasonList[i].className = 'default'
        }
      }
      this.dialogForm.reason = index
    },
    // 下载模板
    downloadTemplate() {
    },
    // 关闭弹窗
    handleCancel() {
      this.$emit('getCancel')
    },
    // 关闭弹窗，不可以删这个方法。不用这个方法点击遮罩层关闭会报错
    handleCloseBindWarnStandard() {
      this.$emit('closeBindWarnStandard')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.main{
  &>ul{
    overflow: hidden;
    border-top: 1px solid #D8D8D8;
    padding: 10px 30px;
    li{
      float: left;
      width: 33.3%;
      height: 35px;
      line-height: 35px;
      .label{
        color: #8F8D8D;
      }
      .value{
        color: #4A4A49;
      }
    }
  }
  .processing-signal{
    border-top: 1px solid #D8D8D8;
    padding: 15px 30px;
  }
  .processing-reason{
    border-top: 1px solid #D8D8D8;
    padding: 15px 30px;
  }
  .processing-remarks{
    border-top: 1px solid #D8D8D8;
    padding: 15px 30px;
  }
  p{
    height: 40px;
    color: #8F8D8D;
    margin: 0;
  }
  .btn-list{
    height: 36px;
    li{
      margin-right: 15px;
      float: left;
    }
  }
 .upload-btn{
    width: 132px;
    height: 132px;
    line-height: 132px;
    text-align: center;
    cursor: pointer;
    font-size: 24px;
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
  }
  .upload-list{
    height: 132px;
    line-height: 132px;
    overflow: hidden;
    li,img{
      width: 160px;
      height: 132px;
      line-height: 132px;
      display: block;
      float: left;
      margin-right: 10px;
      position: relative;
    }
    li.img:hover .deleteImg{
      display: block;
    }
    li.img:hover .infoImg{
      display: block;
    }
    .deleteImg,.infoImg{
      width: 80px;
      height: 132px;
      position: absolute;
      display: none;
      top: 0;
      background: rgba($color: #000000, $alpha: 0.6);
      text-align: center;
      i{
        font-size: 28px;
        color: #fff;
        opacity: 0.7;
        cursor: pointer;
      }
    }
    .deleteImg{
      left: 0;
    }
    .infoImg{
      right: 0;
    }
  }
  #upload {
    display: none;
  }
}
</style>
